<!-- MAIN CONTENT -->
<div id="content">
    <div class="row">
        <big-breadcrumbs items="['Table', 'Data Tables']" icon="table"
                         class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></big-breadcrumbs>
        <div smart-include="app/views/layout/partials/sub-header.tpl.html"></div>
    </div>
    <!-- widget grid -->
    <section widget-grid id="widget-grid">


        <div class="row">
            <!-- article class="col-sm-12">
                <fieldset>
                    <legend>
                        Date Picker (Jquery UI)
                    </legend>

                    <div class="row">
                        <div class="col-sm-12">
                            <label>Select a date (range):</label>
                        </div>
                        <div class="col-sm-2">

                            <div class="form-group">
                                <div class="input-group">
                                    <input class="form-control" id="from" data-smart-datepicker data-min-restrict="#to" data-number-of-months="1" data-changes-month="true"  type="text" placeholder="From">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                </div>
                            </div>

                        </div>
                        <div class="col-sm-2">
                            <div class="form-group">
                                <div class="input-group">
                                    <input class="form-control" id="to" data-smart-datepicker data-max-restrict="#from" data-number-of-months="1" data-changes-month="true" type="text" placeholder="Select a date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                </div>
                            </div>

                        </div>
                    </div>
                </fieldset>
            </article -->
            <article class="col-sm-12">
                <div jarvis-widget id="standard-datatable-widget" data-widget-color="blueLight" data-widget-colorbutton="false" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-table"></i> </span>
                        <h2>Standard Data Tables </h2>
                        <div class="widget-toolbar hidden-phone">
                            <a class="btn btn-danger" href-void><i class="fa fa-plus"></i> add</a>
                        </div>
                    </header>
                    <div>
                        <div class="widget-body no-padding">
                            <div class="widget-body-toolbar">
                                    <div class="row">
                                        <div class="col-sm-2">
                                                <div class="input-group">
                                                    <input class="form-control" id="from" data-smart-datepicker data-min-restrict="#to" data-number-of-months="1" data-changes-month="true"  type="text" placeholder="From">
                                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                </div>
                                        </div>
                                        <div class="col-sm-2">
                                                <div class="input-group">
                                                    <input class="form-control" id="to" data-smart-datepicker data-max-restrict="#from" data-number-of-months="1" data-changes-month="true" type="text" placeholder="Select a date">
                                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <a class="btn btn-default" href-void>search</a>
                                        </div>
                                    </div>
                            </div>
                        <table datatable dt-options="datatables.standardOptions" dt-columns="datatables.standardColumns" class="table table-striped table-bordered table-hover" width="100%">
                        <thead>
                        <tr>
                            <th data-hide="phone">ID</th>
                            <th data-class="expand"><i class="fa fa-fw fa-user text-muted hidden-md hidden-sm hidden-xs"></i> Name</th>
                            <th data-hide="phone"><i class="fa fa-fw fa-phone text-muted hidden-md hidden-sm hidden-xs"></i> Phone</th>
                            <th>Company</th>
                            <th data-hide="phone,tablet"><i class="fa fa-fw fa-map-marker txt-color-blue hidden-md hidden-sm hidden-xs"></i> Zip</th>
                            <th data-hide="phone,tablet">City</th>
                            <th data-hide="phone,tablet"><i class="fa fa-fw fa-calendar txt-color-blue hidden-md hidden-sm hidden-xs"></i> Date</th>
                        </tr>
                        </thead>
                        </table>

                        </div>
                    </div>
                </div>
            </article>


        </div>

    </section>
</div>
